iT邦幫忙

2021 iThome 鐵人賽

DAY 21
0
Modern Web

入門前端技能之旅系列 第 21

Day.21 「物件也有繼承問題?」 —— JavaScript 繼承 與 原型鍊

  • 分享至 

  • xImage
  •  

「物件也有繼承問題?」 —— JavaScript 繼承 與 原型鍊

我們每新增一個函式,瀏覽器都會向函式內新增一個屬性叫 prototype

function Person () {};
console.log( Person.prototype );

prototype

原型鍊

如果是普通函式的直接調用,prototype 不會有任何作用

當是以構造函式的方式調用,他所新增的物件會有一個隱藏的屬性,指向該構造函式的原型物件。
雖然 prototype 是隱藏屬性,但我們可以透過 __proto__ 來查看該屬性

function Person () {};
const person = new Person;
console.log( person.__proto__ );

proto
原型鍊

也能發現 prototype__proto__ 是一樣的

function Person () {};
const person = new Person;
console.log( Person.prototype === person.__proto__ ); // true

繼承

依照之前物件傳址的特性,可以了解到物件中,共用的內容,可以設置到 prototype 中,新增的屬性就會繼承原型物件

function Person () {};
Person.prototype.a = "我是原型物件 a";  // 添加原型物件屬性 a
const person = new Person;
console.log( person.a );  // "我是原型物件 a"

繼承原型物件 a 屬性

可以發現如果物件內沒有 a 屬性,它就會往原型物件中尋找 a 屬性,如果找到就會使用。

function Person () {};
Person.prototype.a = "我是原型物件 a";  // 添加原型物件屬性 a
const person = new Person;
person.a = "我是 person 中的 a";
console.log( person.a );  // "我是 person 中的 a"

從本身尋找 a 屬性

優化之前的 sayName

看到這裡是不是又發現可以更好優化自訂物件的方法了!

function Person (name, gender) {
  this.name = name,
  this.gender = gender
}
Person.prototype.sayName = function(){
  console.log( "大家好!我是" + this.name );
}

const person = new Person("毛毛", "男");
person.sayName();  // "大家好!我是毛毛"

就往原型物件尋找 sayName 方法,同時也不會汙染到我們的全局作用域!

檢查物件屬性

有時候,我們會需要檢查物件內有沒有該屬性,可以使用 in 語法來檢查:"屬性名" in 物件名,需注意屬性名要用引號包起來。

function Person (name, gender) {
  this.name = name,
  this.gender = gender
}
Person.prototype.sayName = function(){
  console.log( "大家好!我是" + this.name );
}

const person = new Person("毛毛", "男");
console.log("name" in person);    // true
console.log("sayName" in person); // true

但會發現,會連原型物件的屬性也判定為 true
這時如果我們要更確實的判斷是不是該物件內的屬性,可以使用 hasOwnProperty() 語法來檢查

function Person (name, gender) {
  this.name = name,
  this.gender = gender
}
Person.prototype.sayName = function(){
  console.log( "大家好!我是" + this.name );
}

const person = new Person("毛毛", "男");
console.log( person.hasOwnProperty("name"));    // true
console.log( person.hasOwnProperty("sayName")); // false

這些「方法」都哪來的

沒錯!聰明的你應該已經更瞭解繼承原型鍊,而我們常用的方法,其實都是在原型物件裡面!

function Person () {}
const person = new Person();

console.log( "hasOwnProperty" in person);              // true
console.log( person.hasOwnProperty("hasOwnProperty")); // false

這時嘗試使用 __proto__ 找出原型

function Person () {}
const person = new Person();

console.log( person.__proto__.hasOwnProperty("hasOwnProperty")); // false

原型物件中還有原型物件

你會發現,奇怪!怎麼還是 false,那是因為,原型物件也是物件,原型物件中還有原型物件!
當然!這不是無限套娃~會一路找到原型物件為 null 的值,代表該物件沒有原型物件了,而這個物件就是 Object 物件的原型

原型物件中還有原型物件

function Person () {}
const person = new Person();

console.log( person.__proto__.__proto__);           // Object
console.log( person.__proto__.__proto__.__proto__); // null
console.log( person.__proto__.__proto__.hasOwnProperty("hasOwnProperty"));  // true

總結

已經把我們的物件精隨學習的差不多了~也認識 JavaScript 中,我們常用的方法都藏在物件的隱藏屬性之中!


上一篇
Day.20 「初步認識 this,中央工廠式的自訂物件~」 —— JavaSript 構造函式
下一篇
Day.22 「讓我們在更深入函式~」 —— JavaScript call & apply & arguments
系列文
入門前端技能之旅30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言